{% extends "base.html" %}

{% block title %}管理分类{% endblock %}

{% block content %}
<div class="container mt-5 form-container">
    <h1 class="mb-4">管理分类</h1>

    <!-- 添加新分类的表单 -->
    <form action="/categories" method="post" class="mb-4">
        <div class="mb-3">
            <label for="category_name" class="form-label">新分类名称:</label>
            <input type="text" name="category_name" class="form-control" required>
        </div>
        <button type="submit" class="btn btn-primary">添加分类</button>
    </form>

    <!-- 显示已有分类 -->
    <h2 class="mb-3">已有分类</h2>
    <ul class="list-group">
        {% for category in categories %}
        <li class="list-group-item d-flex justify-content-between align-items-center">
            {{ category.name }}
            <form action="{{ url_for('delete_category', category_id=category.id) }}" method="post" style="display:inline;">
                <button type="submit" class="btn btn-danger btn-sm">删除</button>
            </form>
        </li>
        {% endfor %}
    </ul>

    <!-- 返回首页按钮 -->
    <a href="{{ url_for('add_expense_page') }}" class="btn btn-secondary mt-3">返回上页</a>
</div>
{% endblock %}
